{% extends 'layout.html' %}
{% block content %}


    <div class="container">
        <div>
            <input id="btnAdd" type="button" value=" 新建订单1" class="btn btn-success">
            <input  id="btnAdd2" type="button" value=" 新建订单2" class="btn btn-success" data-toggle="modal" data-target="#myModal">
        </div>
        <!-- 新建/编辑订单对话框 -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">新建</h4>
                    </div>
                    <div class="modal-body">
                        <form id="formAdd">
                            <div class="clearfix">
                                {% for item in uform %}
                                    <div class="col-xs-6">
                                        <div class="form-group" style="position: relative;margin-bottom: 30px">
                                            <label>{{ item.label }}</label>
                                            {{ item }}
                                            <sapn class="error-msg"
                                                  style="color: red;position: absolute">{{ item.errors.0 }}</sapn>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关 闭</button>
                        <button id="btnSave" type="button" class="btn btn-primary">保 存</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 订单列表 -->
        <div class="panel panel-default" style="margin-top: 30px">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"> </span>
                订单列表
            </div>

            <!-- Table -->
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>订单号</th>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>状态</th>
                    <th>管理员</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for item in queryset %}
                    <tr delid="{{ item.id }}">
                        <th>{{ item.id }}</th>
                        <td>{{ item.oId }}</td>
                        <td>{{ item.title }}</td>
                        <td>{{ item.price }}</td>
                        {#                        <td>{{ item.get_status_display }}</td>#}
                        <td> {% if item.status == 1 %}
                            <span class="label label-success">已支付</span>
                        {% else %}
                            <span class="label label-default">待支付</span>
                        {% endif %}
                        </td>
                        <td>{{ item.admin.username }}</td>
                        <td>
                            <input editId="{{ item.id }}" class="btn btn-primary btn-xs btn-edit" type="button"
                                   value="编辑">
                            <input delId="{{ item.id }}" class="btn btn-danger btn-xs btn-delete" type="button"
                                   value="删除">
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
        <ul class="pagination">
            {{ page_string }}
            <li style="margin-left: 15px">

                <form method="get" style="float: left;margin-left: -1px">
                    <div class="input-group" style="width: 100px">
                        <input type="text" name="page"
                               style="position: relative;float: left;display: inline-block;width:100px;border-radius: 0"
                               class="form-control" placeholder="页码">
                        <span class="input-group-btn">
                    <button style="border-radius: 0" class="btn btn-default" type="submit">跳转</button>
                </span>
                    </div>

                </form>
            </li>
        </ul>
        <!-- 删除对话框 -->
        <!-- Modal -->
        <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="alert alert-danger alert-dismissible fade in" role="alert">
                    <h4>是否确定删除</h4>
                    <p style="margin: 10px 5px">删除当前订单</p>
                    <p style="text-align: right">
                        <button type="button" class="btn btn-danger" id="dialogSuredel">确 定</button>
                        <button type="button" style="margin-left: 20px" class="btn btn-default" data-dismiss="modal">取
                            消
                        </button>
                    </p>
                </div>
            </div>
        </div>
    </div>


{% endblock %}
{% block js %}
    <script type="text/javascript">
        var DEL_ID
        var EDIT_ID
        $(function () {
            diaLogbtnAddEvent()
            diaLogbtnSaveEvent()
            btnDelSaveEvent()
            btnEditEvent()
        })

        function diaLogbtnAddEvent() {
            //点击按钮显示对话框
            $('#btnAdd').click(function () {
                EDIT_ID = undefined;
                $('#formAdd')[0].reset()
                // 设置对话框标题
                $('#myModalLabel').text('新建')
                $('#myModal').modal('show')
            })

          $('#btnAdd2').click(function () {
                EDIT_ID = undefined;
                $('#formAdd')[0].reset()
                // 设置对话框标题
                $('#myModalLabel').text('新建')
            })

        }

        function diaLogbtnSaveEvent() {
            // 清楚错误信息
            $('.error-msg').empty()

            //点击按钮显示对话框
            $('#btnSave').click(function () {

                if (EDIT_ID) {
                    // 编辑
                    doEdit()
                } else {
                    // 添加
                    doAdd()
                }
            })
        }

        function doEdit() {
            // 向后台发送请求数据
            $.ajax({
                url: '/order/edit/' + '?id=' + EDIT_ID,  // => /order/edit/?id=12
                type: 'post',
                data: $('#formAdd').serialize(),
                dataType: 'JSON',
                success: function (res) {
                    if (res.code === 200) {
                        //清空表单    $('#formAdd') jQuery 对象 ->  $('#formAdd')[0] DOM 对象
                        $('#formAdd')[0].reset()
                        // 关闭对话框
                        $('#myModal').modal('hide')
                        //  alert("保存成功")
                        location.reload()

                    } else {
                        if (res.tips) {
                            alert(res.tips)
                        } else {
                            $.each(res.error, function (name, data) {
                                console.log(name, data)
                                $('#id_' + name).next().text(data[0])
                            })
                        }
                    }
                }

            })
        }

        function doAdd() {
            // 向后台发送请求数据
            $.ajax({
                url: '/order/add/',
                type: 'post',
                data: $('#formAdd').serialize(),
                dataType: 'JSON',
                success: function (res) {
                    if (res.code === 200) {
                        //清空表单    $('#formAdd') jQuery 对象 ->  $('#formAdd')[0] DOM 对象
                        $('#formAdd')[0].reset()
                        // 关闭对话框
                        $('#myModal').modal('hide')
                        //  alert("保存成功")
                        location.reload()

                    } else {
                        $.each(res.error, function (name, data) {
                            console.log(name, data)
                            $('#id_' + name).next().text(data[0])
                        })
                    }
                }

            })
        }

        function btnDelSaveEvent() {
            $('.btn-delete').click(function () {
                {#alert('点击了删除')#}
                //显示删除对话框 delModal
                $('#delModal').modal('show')

                //获取当前行的ID并赋值给全部变量
                DEL_ID = $(this).attr('delID')
            })
        }

        function dialogSureEvent() {
            $('#dialogSuredel').click(function () {
                // 点击确认按钮,将全局变量中设置的那个要删除ID发送到后台
                // get 请求
                // $.ajax({
                //      url:'/order/'+DEL_ID+'del',  //=>   url:'/order/'+DEL_ID+'del' == /order/1/del
                //      type: 'GET',
                //      dataType: 'JSON',
                //      success:function (res){
                //
                //      }

                $.ajax({
                    url: '/order/del',  //  => url:/order/del/?id=123
                    type: 'GET',
                    data: {
                        id: DEL_ID
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.code === 200) {
                            location.reload()
                            // 隐藏对话框
                            //$('#delModal').modal('hide')
                            // 在页面上将当前一行数据山居
                            // $("tr[delid='" + DEL_ID + "']").remove()
                            // 要删除ID制空
                            // DEL_ID = 0
                        } else {
                            alert(res.error)
                        }

                    }
                })
            })
        }

        function btnEditEvent() {
            $('.btn-edit').click(function () {
                $('#formAdd')[0].reset()
                var editId = $(this).attr('editid')
                EDIT_ID = $(this).attr('editid')
                // 发送Ajax去后端 获取当前行的数据
                $.ajax({
                    url: '/order/details/',
                    type: 'GET',
                    data: {
                        id: editId
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.code === 200) {
                            //  讲数据赋值到对话框中
                            $.each(res.data, function (name, data) {
                                $('#id_' + name).val(data)
                            })
                            // 修改对话框的标题
                            $('#myModalLabel').text('编辑')
                            // 点击编辑，显示对话框
                            $('#myModal').modal('show')

                        } else {
                            alert(res.error)
                        }
                    }
                })

                //在默认对话框看到

            })
        }

    </script>

{% endblock %}

